<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/ext/resources/css/ext-all.css"/>

    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/adapter/ext/ext-base.js"; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-all.js"; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-lang-es.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/plugins/searchfield.js"; ?>"></script>
    <script type="text/javascript">
    var BASE_URL = '<?php echo base_url(); ?>' + 'index.php/';
    var BASE_PATH = '<?php echo base_url(); ?>';
    var BASE_ICONS = BASE_PATH + 'assets/icons/';
    Ext.onReady(function() {
        var strUsers = new Ext.data.Store({
            reader: new Ext.data.JsonReader({
                fields: [
                    'idGastosCostos', 'concepto', 'valor', 'fecha'
                ],
                root: 'rows', totalProperty: 'results'
            }),
            proxy: new Ext.data.HttpProxy({
                url: BASE_URL + 'administracion/gastosCostosSelect',
                method: 'POST'
            })
        });

        var searchUsers = new Ext.app.SearchField({
            store: strUsers,
            params: {start: 0, limit: 10},
            width: 180,
            id: 'fieldUsersSearch'
        });

        var tbUsers = new Ext.Toolbar({
            items:[ {
            }, searchUsers]
        });

        var gridUsers = new Ext.grid.EditorGridPanel({
            frame: true, 
            border: true, 
            stripeRows: true,
            store: strUsers, 
            title: 'Gastos/Costos',
            style: 'margin:0 auto;', height: 450, width: 370,
            columns: [ {
                    header: "Concepto",
                    dataIndex: 'concepto',
                    sortable: true,
                    width: 150
                },{
                    header: "Valor",
                    dataIndex: 'valor',
                    sortable: true,
                    width: 100
                },{
                    header: "Fecha",
                    dataIndex: 'fecha',
                    sortable: true,
                    width: 100
                }
            ],
            tbar: tbUsers,
            bbar: new Ext.PagingToolbar({
                pageSize: 20,
                store: strUsers,
                displayInfo: true
            })
        });

        gridUsers.render('divgrid');
        strUsers.load();
    });
    </script>
    <style type="text/css">
        #divgrid {
            background: #e9e9e9;
            border: 1px solid #d3d3d3;
            margin: 20px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 60px;
        }
    </style>

    <title></title>
</head>
<body>
    <div id="divgrid"></div>
</body>
</html>